import React from 'react';
import {Modal, Button, message} from 'antd';
import Grid from '../../components/table/grid'
import axios from 'axios';
import {injectIntl} from 'react-intl';

class bindVIN extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            params: {},
            refresh: 0,
            selectedCar: []
        };
        this.common = this.props.intl.messages.common;
        this.columns = [
            {
                title: this.common.carNO,
                dataIndex: 'plateNo',
                key: 'plateNo',
            },
            {
                title: this.common.VIN,
                dataIndex: 'vin',
                key: 'vin',
            },
            {
                title: this.common.operation,
                width: '20%',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <a onClick={() => this.bindVIN(text, record)}>{this.common.bind}</a>
                    </span>
                )
            }
        ];
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            visible: nextProps.visible,
        });
        if(nextProps.visible){
            this.setState({
                refresh:this.state.refresh+1
            })
        }
    }

    handleOk = () => {
        this.setState({
            visible: false,
            confirmLoading: false,
        });
    };
    bindVIN = (text) => {
        const accountIds = this.props.accountIds.join(',');
        this.fetchData({stubGroupIds: accountIds, vins: text.vin}, '/api/vinStub/bindStub');
    };

    batchBind = () => {
        if (this.state.selectedCar.length === 0) {
            message.warn('请选择下表车辆');
            return
        }
        const vins = this.state.selectedCar.map((k) => (k.vin)).join(',');
        const accountIds = this.props.accountIds.join(',');
        console.log(vins, accountIds);
        this.fetchData({stubGroupIds: accountIds, vins: vins}, '/api/vinStub/bindStub');
    };



    fetchData = (params, url) => {
        axios.get(url, {params: params}).then(res => {
            console.log(res);
            if(res&&res.data&&res.data.code=='200'){
                message.success('操作成功');
                this.props.handleCancel();
            }
        })
    };

    render() {
        const {visible} = this.state;
        const common = this.props.intl.messages.common;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRow) => {
                this.setState({
                    selectedCar: selectedRow
                })
            },
        };
        return (
            <div>
                <Modal title={common.bindVIN}
                       visible={visible}
                       onOk={this.handleOk}
                       width={800}
                       onCancel={this.props.handleCancel}
                       footer={[<div key={1} style={{height: 22}}></div>]}
                >
                    <div>
                        <Button type="primary" onClick={this.batchBind}
                                style={{marginBottom: 20}}>{this.common.batchBind}</Button>
                        <Grid rowSelection={rowSelection}
                              refresh={this.state.refresh}
                              params={this.state.params} columns={this.columns} url="api/user/car/qry"/>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default injectIntl(bindVIN)